<template>
    <view class="gxz-container">
        <scroll-view 
            class="list" 
            :scroll-y="true" 
            @scrolltolower="loadMore"
            :refresher-enabled="true" 
            :refresher-triggered="refresherTriggered" 
            @refresherrefresh="onRefresherRefresh" 
            refresher-background="#f5f5f5"
        >
            <view class="waterfall-container">
                <!-- 骨架屏（无数据加载中，瀑布流两列） -->
                <template v-if="listLoading && gxzList.length === 0">
                    <view class="waterfall-column" v-for="col in 2" :key="col">
                        <view 
                            class="good-card skeleton" 
                            v-for="n in 3" 
                            :key="n"
                        >
                            <view class="sk-img" :style="{ height: ((col + n) % 2 === 0 ? '360rpx' : '260rpx') }"></view>
                            <view class="good-body">
                                <view class="sk-line lg"></view>
                                <view class="sk-line md"></view>
                                <view class="sk-meta"></view>
                            </view>
                        </view>
                    </view>
                </template>
                <template v-else>
                    <view class="waterfall-column" v-for="(column, colIndex) in waterfallColumns" :key="colIndex">
                        <view class="good-card" v-for="(item, index) in column" :key="index" @click="openDetail(item)">
                            <image :src="item.images[0]" :style="{width: '100%', height: item.imageHeight, borderRadius: '16rpx 16rpx 0 0'}" mode="aspectFill"></image>
                            <view class="good-body">
                                <view class="good-title">{{ item.title }}</view>
                                <view class="good-price">
                                    <view class="flex price">
                                        ￥<text class="val">{{ item.price.split('.')[0] }}.</text>{{ item.price.split('.')[1] }}
                                    </view>
                                    <text class="view-num font20">{{ item.view_count }}人浏览过</text>
                                </view>
                                <view class="good-meta">
                                    <image :src="item.member.userpic" style="width: 24rpx; height: 24rpx;" mode="aspectFill"></image>
                                    <text class="shop-name">{{ item.member.nickname }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </template>
                
            </view>
            <view class="list-footer">
                <text v-if="listLoading">正在加载...</text>
                <text v-else-if="!hasMore">已经加载全部</text>
            </view>
        </scroll-view>
    </view>
</template>
<script>
import { getIdleList } from '@/api/index.js'
export default {
    data() {
        return {
            gxzList: [],
            waterfallColumns: [[], []], // 两列瀑布流
            page: 1,
            limit: 10,
            hasMore: true,
            listLoading: false,
            refresherTriggered: false,
            keyword:''
        }
    },
    mounted() {
        this.fetchList()
        this.$on('search', (keyword) => {
            this.keyword = keyword
            this.page = 1
            this.hasMore = true
            this.gxzList = []
            this.fetchList()
        })
    },
    methods: {
        async fetchList(append = false) {
            if (this.listLoading || (!this.hasMore && append)) return
            this.listLoading = true
            try {
                // TODO: 替换为真实接口
                const res = await getIdleList({ page:this.page, limit: this.limit})
                res.data.list.map((item, k) => item.imageHeight = (k == 1) ? '360rpx' : '260rpx')
                if (append) {
                    this.gxzList = this.gxzList.concat(res.data.list)
                } else {
                    this.gxzList = res.data.list
                }
                
                this.arrangeWaterfall()
                this.hasMore = res.data.list.length >= this.limit
                if (this.hasMore) this.page += 1
            } finally {
                this.listLoading = false
                if (this.refresherTriggered) this.refresherTriggered = false
            }
        },
        loadMore() {
            this.fetchList(true)
        },
        onRefresherRefresh() {
            if (this.listLoading || this.refresherTriggered) return
            this.refresherTriggered = true
            this.page = 1
            this.hasMore = true
            this.fetchList(false)
        },
        openDetail(item) {
            // TODO: 跳转详情
            uni.navigateTo({ url: `/views/community/idle-detail?id=${item.id}` })
        },
        // 瀑布流布局算法
        arrangeWaterfall() {
            this.waterfallColumns = [[], []]
            this.gxzList.forEach((item, index) => {
                // 计算两列的高度，选择较短的列
                const leftHeight = this.calculateColumnHeight(0)
                const rightHeight = this.calculateColumnHeight(1)
                
                if (leftHeight <= rightHeight) {
                    this.waterfallColumns[0].push(item)
                } else {
                    this.waterfallColumns[1].push(item)
                }
            })
        },
        // 计算列的高度（模拟）
        calculateColumnHeight(columnIndex) {
            const column = this.waterfallColumns[columnIndex]
            let totalHeight = 0
            column.forEach(item => {
                // 图片高度 + 内容区域高度（估算）
                const imageHeight = parseInt(item.imageHeight) || 260
                const contentHeight = 120 // 估算内容区域高度
                totalHeight += imageHeight + contentHeight + 20 // 20rpx margin
            })
            return totalHeight
        },
    }
}
</script>
<style lang="scss" scoped>
.gxz-container {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    
    .list {
        height: 100%;
        padding:0 20rpx;
        box-sizing: border-box;
        margin-bottom: 40rpx;
    }

    .waterfall-container {
        display: flex;
        gap: 20rpx;
        padding-top: 20rpx;
    }

    .waterfall-column {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 20rpx;
    }

    .good-card {
        width: 100%;
        background: #fff;
        overflow: hidden;
        box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.1);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
    }

    .good-body {
        padding: 16rpx;
    }

    .good-title {
        font-size: 28rpx;
        color: #333;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .good-price {
        color: #E53935;
        font-size: 24rpx;
        font-weight: 600;
        margin: 8rpx 0 4rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .price {
            font-size: 20rpx;
            font-weight: 600;
            color: #E53935;
            align-items: baseline;
        }
        .val { font-size: 32rpx; }
        .view-num { margin-left: auto; color: #999; }

    }

    .good-meta {
        display: flex;
        align-items: center;
        color: #999;
        font-size: 22rpx;
        .shop-name { margin: 0 8rpx; }
    }

    /* 骨架屏 */
    .skeleton {
        .sk-img { background: #f0f0f0; }
        .sk-line { height: 24rpx; background: #f0f0f0; border-radius: 8rpx; margin: 12rpx 0; &.lg{height:32rpx} &.md{width: 60%} }
        .sk-meta { height: 22rpx; background: #f0f0f0; border-radius: 8rpx; }
    }

    .list-footer {
        text-align: center;
        color: #999;
        font-size: 24rpx;
        padding: 24rpx 0 40rpx;
    }
}
</style>